<template>
  <div class="listView">
    <listViewTop :playlist="state.playlist"></listViewTop>
    <play-list :playlist="state.playlist"></play-list>
    <play-controller></play-controller>
  </div>
</template>

<script>
import * as indexApi from "@/api/index";
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import listViewTop from "@/components/listViewTop.vue";
import playList from "@/components/playList.vue";
import playController from "@/components/playController.vue";
import store from "@/store/index.js";
export default {
  name: "ListView",

  setup() {
    const route = useRoute();
    let state = reactive({
      list: [],
      playlist: {
        tracks: [],
      },
    });
    onMounted(async () => {
      let result = await indexApi.playlistDetail({ id: route.query.id });
      state.playlist = result.playlist;
      store.commit("setPlaylist", result.playlist);
    });
    return {
      state,
    };
  },
  components: {
    listViewTop,
    playList,
    playController,
  },
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
</style>